<template>
  <keep-alive>
  <view class="content">
	<!-- 企业基本信息 -->
    <view class="list">
	  <view class="list-call-title">
		<text class="sl-tile-title">企业基本信息</text>
	  </view>
      <view class="list-call">
		<text class="sl-tile">企业名称</text>
        <input class="sl-input" v-model="from.entName" type="text" placeholder="请输入" />
      </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license">上传营业执照</text>
		<text class="sl-example">查看范例</text>
	  </view>
	  <view class="list-call-license">
		<view>
		  <view class="sl-tile-upLicense">营业执照</view>
		  <view class="sl-tile-describeLicense">请上传您的营业执照</view>
		</view>
		<view class="sl-tile-img" @tap="upLicense">
		  <image :src="license"></image>
		</view>
	  </view>
      <view class="list-call">
		<text class="sl-tile">统一社会信用代码</text>
        <input class="sl-input" v-model="from.entCode" type="text" placeholder="请输入" />
      </view>
	  <view class="list-call">
	  	<text class="sl-tile">成立日期</text>
		<uni-datetime-picker v-model="from.entDate"  placeholder="请选择" :border="false" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">营业执照注册地址</text>
	    <input class="sl-input" v-model="from.entSite" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">营业期限</text>
	    <input class="sl-input" v-model="from.entDeadline" type="number" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">注册资本</text>
	    <input class="sl-input" v-model="from.entCapital" type="number" placeholder="请输入" />
	  </view>
    </view>
    <!-- 法定代表人信息 -->
    <view class="list listTop">
	  <view class="list-call-title">
		<text class="sl-tile-title">法定代表人信息</text>
	  </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license">法人代表/负责人身份证</text>
		<text class="sl-example">查看范例</text>
	  </view>
	  <view class="list-call-license">
		<view class="sl-tile-img" @tap="TakePhoto('legalSFZ_A')">
		  <image :src="SFZfrontImg"></image>
		</view>
		<view class="sl-tile-img" @tap="TakePhoto('legalSFZ_B')">
		  <image :src="SFZbackImg"></image>
		</view>
	  </view>
      <view class="list-call">
		<text class="sl-tile">法定代表人姓名</text>
        <input class="sl-input" v-model="from.legalName" type="text" placeholder="请输入" />
      </view>
	  <view class="list-call">
	  	<text class="sl-tile">法定代表人证件类型</text>
	    <input class="sl-input" v-model="from.legalCertificate" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">法定代表人证件号码</text>
	    <input class="sl-input" v-model="from.legalCertificateNumber" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">证件有效期</text>
		<uni-datetime-picker v-model="from.legalDate"  placeholder="请选择" :border="false" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">法定代表人手机号码</text>
	    <input class="sl-input" v-model="from.legalNumber" type="text" placeholder="请输入" />
	  </view>
      <view class="list-call-title">
		<text class="sl-tile-title">授权委托书</text>
	  </view>
	  <view class="list-call-license">
	  		<view class="sl-tile-img" @tap="uploadFile">
	  		  <image src="../../static/register/agreement.png"></image>
			  <text class="filename"></text>
	  		</view>
	  		<view class="sl-tile-img" @tap="downloadFile">
	  		  <image src="../../static/register/chapter.png"></image>
			  <text class="filename"></text>
	  		</view>
	  </view>
    </view>
	<!-- 银行账户信息 -->
    <view class="list listTop">
	  <view class="list-call-title">
		<text class="sl-tile-title">银行账户信息</text>
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">账户名</text>
	    <input class="sl-input" v-model="from.bankName" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">开户行</text>
	    <input class="sl-input" v-model="from.openingBank" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">银行账号</text>
	    <input class="sl-input" v-model="from.bankAccount" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  		<text class="sl-tile">联行号</text>
	    <input class="sl-input" v-model="from.bankMark" type="text" placeholder="请输入" />
	  </view>
    </view>
    <!-- 操作员信息 -->
    <view class="list listTop listBottom">
	  <view class="list-call-title">
		<text class="sl-tile-title">操作员信息</text>
	  </view>
	  <view class="list-call">
	  	 <text class="sl-tile">登录用户名</text>
	     <input class="sl-input" v-model="from.loginName" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license">身份证复印件</text>
		<text class="sl-example">查看范例</text>
	  </view>
	  <view class="list-call-license">
		<view class="sl-tile-img" @tap="TakePhoto('SFZback_A')">
		  <image :src="SFZfrontImgA"></image>
		</view>
		<view class="sl-tile-img" @tap="TakePhoto('SFZback_B')">
		  <image :src="SFZbackImgA"></image>
		</view>
	  </view>
      <view class="list-call">
		<text class="sl-tile">证件类型</text>
        <input class="sl-input" v-model="from.operatorCertificate" type="text" placeholder="请输入" />
      </view>
	  <view class="list-call">
	  	<text class="sl-tile">姓名</text>
	    <input class="sl-input" v-model="from.operatorName" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">证件有效期</text>
		<uni-datetime-picker v-model="from.operatorDate"  placeholder="请选择" :border="false" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">证件号码</text>
	    <input class="sl-input" v-model="from.operatorNumber" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">手机号码</text>
	    <input class="sl-input" v-model="from.operatorPhoneNumber" type="text" placeholder="请输入" />
	  </view>
	  <view class="list-call">
	  	<text class="sl-tile">邮箱</text>
	    <input class="sl-input" v-model="from.operatorMail" type="text" placeholder="请输入" />
	  </view>
    </view>
    <view class="footBox listTop">
      <button @tap="laststep" class="lastStep">上一步</button>
	  <button @tap="bindLogin" class="nextStep">下一步</button>
    </view>
	<!-- 申请成功 -->
	<uni-popup ref="popupSucceed" background-color="#fff">
	   <view class="popup-content">
		 <uni-icons type="checkbox-filled" class="correct" size="80"></uni-icons>
		 <view class="submit">您的注册申请已提交，请等待平台审核</view>
		 <view class="await">客户经理将及时与您联系，请耐心等待</view>
	   </view>
	</uni-popup>
	<!-- 申请拒绝 -->
	<uni-popup ref="popupRefuse" background-color="#fff">
	   <view class="popup-contentRefuse">
		 <uni-icons type="clear" class="correctRefuse" size="80"></uni-icons>
		 <view class="applyfor">很抱歉，您暂不符合申请条件，如</view>
		 <view class="applyfor">有疑问，请咨询客服：</view>
		 <view class="applyfor">400-955-0343</view>
	   </view>
	</uni-popup>
  </view>
  </keep-alive>
</template>

<script>
  var js;
  export default {
    onUnload() {
      clearInterval(js)
      this.second = 0;
    },
    data() {
      return {
		from: {
		  entName: '',
		  entCode: '',
		  entDate: '',
		  entSite: '',
		  entDeadline: '',
		  entCapital: '',
		  legalName: '',
		  legalCertificate: '',
		  legalCertificateNumber: '',
		  legalDate: '',
		  legalNumber: '',
		  bankName: '',
		  openingBank: '',
		  bankAccount: '',
		  bankMark: '',
		  loginName: '',
		  operatorCertificate: '',
		  operatorName: '',
		  operatorDate: '',
		  operatorNumber: '',
		  operatorPhoneNumber: '',
		  operatorMail: ''
		},
		license: '../../static/register/license.png',
		SFZfrontImg: '../../static/register/SFZfront.png',
		SFZbackImg: '../../static/register/SFZback.png',
		SFZfrontImgA: '../../static/register/SFZfront.png',
		SFZbackImgA: '../../static/register/SFZback.png',
        name: '',
        phone: '',
        code: '',
        second: 0
      };
    },
	mounted() {

	},
	onShow() {
		var _this = this
		uni.getStorage({
			key: 'data',
			success: function (res) {
				if (res.data) {
					 const dataStr = JSON.parse(res.data)
					 if (dataStr.legal == 'legalSFZ_A') {
						_this.SFZfrontImg = dataStr.tempImagePaths 
					 }
					 if (dataStr.legal == 'legalSFZ_B') {
						_this.SFZbackImg = dataStr.tempImagePaths 
					 }
					 if (dataStr.legal == 'SFZback_A') {
					    _this.SFZfrontImgA = dataStr.tempImagePaths 
					 }
					 if (dataStr.legal == 'SFZback_B') {
					    _this.SFZbackImgA = dataStr.tempImagePaths 
					 } 
				}
			}
		});
		this.clear()
	},
    methods: {
      clear(){
        clearInterval(js)
        js = null
        this.second = 0
      },
	  // 上传营业执照
	  upLicense() {
        var _this = this
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				_this.license = Array.isArray(res.tempFilePaths) ? res.tempFilePaths[0] : res.tempFilePaths
			}
		});
	  },
	  // 下一步
      bindLogin() {
        if (this.from.entName == 0) {
          uni.showToast({
            icon: 'none',
            title: '企业名称不能位空!'
          });
          return;
        }
		var _this = this
		uni.showModal({
		  title: '提示',
		  content: '确认资料填写无误!',
		  showCancel: true,
		  cancelText: '取消',
		  confirmText: '确认',
		  success: function (res) {
		    if (res.confirm) {
			  // _this.$refs.popupRefuse.open()
		      _this.$refs.popupSucceed.open()
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/clt/index'
					});
				}, 1000)
		    } else if (res.cancel) {
		      console.log('用户点击取消');
		    }
		  }
		});
		uni.clearStorage();
      },
	  // 下载
	  uploadFile() {
		 uni.chooseImage({
		   success: chooseImageRes => {
			 const tempFilePaths = chooseImageRes.tempFilePaths;
			 uni.uploadFile({
			   url: 'https://trainzifp.izejin.com/api/sys-ent-register/upload-attach', // 你的服务器上传接口
			   filePath: tempFilePaths[0],
			   name: 'file', // 这里根据后端需要的字段来定义
			   formData: {},
			   header: {	
				 'content-type': 'application/x-www-form-urlencoded',
				  // 如果服务器要求跨域，可以添加跨域的相关header
				 'custom-header': 'value' // 根据实际情况设置
			   },
			   success: uploadFileRes => {
				 console.log(uploadFileRes.data);
			   },
			   fail: uploadFileError => {
				 console.error(uploadFileError);
			   }
			});
		  }
		})
	  },
	  // 下载
	  downloadFile() {
		  uni.downloadFile({
			url: 'https://trainzifp.izejin.com/api/common/upload-file', //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('下载成功');
				}
			}
		  });
	  },
	  laststep() {
		uni.navigateBack({
			delta: 1  // delta值为1时表示返回的页面层数
		}); 
		uni.clearStorage();
	  },
	  // 相机
	  TakePhoto(identification){
	     uni.navigateTo({
	       url: `component/camera?title=${identification}` // 跳转到相机
	     });
	  }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 30rpx;
    padding-left: 25rpx;
    padding-right: 25rpx;
	background: #FFFFFF;
  }
  .listTop {
	margin-top: 20rpx;
  }
  .listBottom {
	margin-bottom: 416rpx;
  }
  .sl-tile-img {
	  width: 300rpx;
	  height: 214rpx;
  }
  .sl-tile-img image{
  	  width: 300rpx;
  	  height: 214rpx;
  }
  .titlewidth {
	  background: #000000;
  }
  .filename {
	  display: inline-block;
	  height: 36rpx;
  }
  .popup-content {
    position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
    z-index: 999;
    width: 90%;
	height: 500rpx;
    top: 22%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
  }
  .popup-contentRefuse {
	  position: fixed;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  z-index: 999;
	  width: 90%;
	  height: 450rpx;
	  top: 20%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  background-color: #fff;
	  text-align: center;
	  border-radius: 3px;
	  overflow: hidden;
  }
  .applyfor {
	  margin: 3rpx 0rpx;
	  font-size: 30rpx;
	  color: #333333;
	  text-align: center;
	  font-weight: 400;
  }
  .correct {
	  color: #315EFB !important;
  }
  .await {
	  font-size: 24rpx;
	  color: #999999;
	  text-align: center;
	  line-height: 24rpx;
	  font-weight: 400;
  }
  .submit {
	  width: 78%;
	  font-size: 40rpx;
	  color: #000000;
	  margin-top: 50rpx;
	  margin-bottom: 32rpx;
	  text-align: center;
	  line-height: 66rpx;
	  font-weight: 400;
  }
  .list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    color: #333333;
    border-bottom: 0.1rpx solid #e2e2e2;
  }
  .list-call-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    color: #333333;
  }
  /deep/.uni-date__x-input{
	width: auto;
	height: 35px;
	color: grey;
	position: relative;
	flex: 1;
	line-height: 35px;
	font-size: 19px;
	overflow: hidden;
  }
  .list-call-license {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: self-start;
	height: 280rpx;
	margin-top: 30rpx;
  }
  .sl-tile-upLicense {
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	font-weight: 500;
  }
  .sl-tile-describeLicense {
	font-size: 24rpx;
	color: #999999;
	letter-spacing: 0;
	line-height: 32rpx;
	font-weight: 400;
	margin-top: 15rpx;
  }
  .sl-tile-title {
	font-size: 32rpx;
	color: #000000;
	line-height: 32rpx;
	font-weight: 600;
  }
  .sl-tile-license {
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	font-weight: 500;
  }
  .sl-tile {
	font-size: 32rpx;
	color: #333333;
	font-weight: 400;
  }
  .sl-example {
    font-size: 28rpx;
    color: #315EFB;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }
  .list-call .sl-input {
    flex: 1;
    text-align: right;
    font-size: 32rpx;
	color: #999999;
	font-weight: 400;
    margin-left: 16rpx;
  }

  .yzm {
    line-height: 56rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    width: 160rpx;
    height: 56rpx;
	background: #315EFB;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	font-weight: 400;
  }
  .footBox {
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	width: 100%;
	bottom: 0rpx;
	height: 190rpx;
	background: #FFFFFF;
  }
  .correctRefuse {
	  color: #FF0000 !important;
  }
  .nextStep {
	  color: #FFFFFF;
	  font-size: 34rpx;
	  width: 300rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  background: #315EFB;
	  border-radius: 49rpx;
	  text-align: center;
  }
  .lastStep {
	 color: #999999;
	 font-size: 32rpx;
	 width: 300rpx;
	 height: 80rpx;
	 line-height: 80rpx;
	 border: 1px solid rgba(153,153,153,1);
	 border-radius: 49px;
	 text-align: center;
  }
</style>
